<template>
  <scroll-view scroll-y class="page">
		<view class="fixed">
			<cu-custom :bgColor="'bg-black'" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">天气情况</block>
			</cu-custom>
		</view>
		<view class="wea-top">
			<view class="space">
				<view class="stars">
					<view class="star"></view>
					<view class="star pink"></view>
					<view class="star blue"></view>
					<view class="star yellow"></view>
				</view>
			</view>
		</view>
		<view class="wea-now">
			<view v-if="weatherNow.wea_img == 'lei'" class="icon thunder-storm">
				<view class="cloud"></view>
				<view class="lightning">
					<view class="bolt"></view>
					<view class="bolt"></view>
				</view>
			</view>
			<view v-else-if="weatherNow.wea_img == 'yin'" class="icon cloudy">
				<view class="sun"></view>
				<view class="cloud"></view>
				<!-- <view class="cloud"></view>
				<view class="cloud"></view> -->
			</view>
			<view v-else-if="weatherNow.wea_img == 'yun'" class="icon cloudy">
				<view class="sun"></view>
				<view class="cloud"></view>
			</view>
			<view v-else-if="weatherNow.wea_img == 'xue'" class="icon flurries">
				<view class="cloud"></view>
				<view class="snow">
					<view class="flake"></view>
					<view class="flake"></view>
				</view>
			</view>
			<view v-else-if="weatherNow.wea_img == 'qing'" class="icon sunny">
				<view class="sun">
					<view class="rays"></view>
				</view>
			</view>
			<view v-else-if="weatherNow.wea_img == 'yu'" class="icon rainy">
				<view class="cloud"></view>
				<view class="rain"></view>
			</view>
			<view v-else class="icon sun-shower">
				<!-- <view class="cloud"></view>
				<view class="sun">
					<view class="rays"></view>
				</view>
				<view class="rain"></view> -->
				<!-- <view class="cloud"></view> -->
			</view>
			<view class="wea-now-right">
				<view v-show="weatherNow.tem" class="wea-now-tem">{{ weatherNow.tem }}℃</view>
				<view v-show="weatherNow.city" class="wea-now-air">{{ weatherNow.city }}</view>
				<view v-show="weatherNow.air" class="wea-now-air">空气质量  {{ setAirTitle(weatherNow.air) }} ({{ weatherNow.air }})</view>
			</view>
		</view>
		<view class="wea-seven">
			<scroll-view scroll-x="true">
				<view class="more-day-report">
					<view class="top-module">
						<view class="title">多天预报</view>
						<picker @change="bindPickerChange" :value="weatherTypeIndex" :range="weatherTypeArray">
							<view class="change">
								<label for="">{{ weatherTypeArray[weatherTypeIndex] }}</label>
								<view class="down-arrow"></view>
								<!-- <image src="../../static/weather/xiala.svg" mode=""></image> -->
							</view>
						</picker>
					</view>
					<view class="body-module">
						<view class="body-weather-line" v-show="weatherTypeIndex != 1">
							<canvas :style="{ width: '100%', height: '150px' }" canvas-id="weather-canvas"></canvas>
						</view>
						<view v-if="weatherTypeIndex == 1" class="zhuzhuangtu">
							<view class="zhuzhuangtu-item" v-for="(item, index) in pillarArray" :key="index">
								<view class="item-bg">
									<view class="item" :style="{ top: item.top + 'px', height: item.height + 'px' }"></view>
								</view>
							</view>
						</view>
						<view class="body-item" v-for="(item, index) in weatherAll.data" :key="index">
							<view class="day-font">{{ stringToDate(item.date, 2) }}</view>
							<view class="day-time">{{ stringToDate(item.date, 1) }}</view>
							<view class="weather-font">{{ item.wea }}</view>
							<view class="weather-image">
								<image :src="'/static/weather/'+item.wea_img+'.png'" mode=""></image>
							</view>
							<view class="max-weather">{{ item.tem_day }}℃</view>
							<view class="weather-line"></view>
							<view class="min-weather">{{ item.tem_night }}℃</view>
							<view class="feng-font">{{ item.win}}</view>
							<!-- <view class="day-state">
								<label>{{ item.air }}</label>
							</view> -->
						</view>
					</view>
				</view>
			</scroll-view>	
		</view>
		<view class="wea-bottom">
			<view class="content-box">
				<image class="img" src="https://6e69-niew6-1302638010.tcb.qcloud.la/wulianwang/%E5%8F%B0%E6%89%87.png?sign=01faafa2b51bae4bdbfa05a39dd1d985&t=1605967885" />
				<image class="img2 rotation" :class="level" src="https://6e69-niew6-1302638010.tcb.qcloud.la/wulianwang/%E6%89%87%E5%8F%B64.png?sign=56f511d4a265a0f9ddf45ca872d1d1f0&t=1609518930" />
			</view>
			<view class="comm-content">
				<view>
					<text>{{ weatherNow.win }}</text>
					<text>风向</text>
				</view>
				<view>
					<text>{{ weatherNow.win_speed }}</text>
					<text>风力</text>
				</view>
				<view>
					<text>{{ weatherNow.win_meter }}</text>
					<text>风速</text>
				</view>
			</view>
		</view>
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
			statusHeight: this.StatusBar,
			weatherTypeArray: ['折线图'],
			weatherTypeIndex: 0,
			cWidth: 540,
			pillarArray: [],
			weatherAll: {},
			weatherNow: {},
			playing: true,
			level: 'three'
		};
  },
  onLoad() {
		
	},
	onShow() {
		this.getNowData()
		this.$nextTick(() => {
			this.getSevenData()
		});
	},
  mounted() {
  },
  methods: {
		// 获取API数据
		getSevenData() {
			let self = this
			this.$http.get('https://www.tianqiapi.com/free/week?appid=75437651&appsecret=Pf48jMz8', {}, {}, {})
				.then(res => {
					self.weatherAll = res
					self.init()
				}).catch(e => {
					console.log(e)
				})
		},
		getNowData() {
			let self = this
			this.$http.get('https://www.tianqiapi.com/free/day?appid=75437651&appsecret=Pf48jMz8', {}, {}, {})
				.then(res => {
					self.weatherNow = res
					self.setWinSpeed(res.win_speed || '0级')
				}).catch(e => {
					console.log(e)
				})
		},
		// 风速判断
		setWinSpeed(s) {
			let speed = 0
			speed = s.substring(s.lastIndexOf('级')-1,s.lastIndexOf('级'))
			if (0 <= speed <= 3) {
				this.level = 'one'
			} else if (3 < speed <= 7) {
				this.level = 'two'
			} else if (7 < speed <= 11) {
				this.level = 'three'
			} else if (11 < speed <= 16) {
				this.level = 'four'
			} else {
				this.level = 'five'
			}
		},
		// 质量判断
		setAirTitle(air) {
			if (0 <= air <= 50) {
				return '优'
			} else if (50 < air <= 100) {
				return '良'
			} else if (100 < air <= 150) {
				return '轻度污染'
			} else if (150 < air <= 200) {
				return '中度污染'
			} else if (200 < air <= 300) {
				return '重度污染'
			} else if (300 < air) {
				return '严重污染'
			} else {
				return '普通'
			}
		},
		init() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.cWidth = Math.round(res.windowWidth * 1.3);
				}
			});
			that.doLineOrPiller();
		},
		doLineOrPiller() {
			if (this.weatherTypeIndex == 1) {
				this.initWeatherPiller();
			} else {
				this.initWeatherPointLine();
			}
		},
		// 日期处理
		stringToDate (dateStr, type){
			let dateArr = dateStr.split('-')
			let y = parseInt(dateArr[0])
			let m
			if(dateArr[1].indexOf("0") == 0){
			  m = parseInt(dateArr[1].substring(1))
			}else{
				m = parseInt(dateArr[1])
			}
			let d = parseInt(dateArr[2])
			let date = new Date(y,m -1,d);
			let year = date.getFullYear(); 
			let month =(date.getMonth() + 1).toString(); 
			let day = (date.getDate()).toString();  
			if (month.length == 1) { 
					month = "0" + month; 
			} 
			if (day.length == 1) { 
					day = "0" + day; 
			}
			let str = ''
			let now = new Date().getDay()
			let week = date.getDay()
			if (now == week) {
				str = '今天'
			} else if (now + 1 == week) { 
				str = '明天'
			} else {
				switch (week) {
					case 0 :
						str += "周日"; break; 
					case 1 :
						str += "周一"; break; 
					case 2 :
						str += "周二"; break; 
					case 3 :
						str += "周三"; break; 
					case 4 :
						str += "周四"; break; 
					case 5 :
						str += "周五"; break; 
					case 6 :
						str += "周六"; break;
				}
			}
			if (type == 1) {
				return month + "/" + day
			} else if (type == 2) {
				return str
			}
		},
		//处理折线图
		initWeatherPointLine() {
			var maxArry = this.weatherAll.data.map(item => {
				return item.tem_day;
			});
			var minArry = this.weatherAll.data.map(item => {
				return item.tem_night;
			});
			var max = [];
			var min = [];
			var maxWeather = Math.max(...maxArry);
			var minWeather = Math.min(...minArry);
			var diff = maxWeather - minWeather;
			for (var i = 0; i < maxArry.length; i++) {
				var height = Math.round(((maxArry[i] - minArry[i]) / diff) * 80);
				max[i] = 50 - Math.round((80 / diff) * (maxWeather - maxArry[i]) + 10);
				min[i] = max[i] - height;
			}
			var section7width = Math.round(this.cWidth / 7);
			var cvs = uni.createCanvasContext('weather-canvas',this);
			cvs.setStrokeStyle('#FB7821');
			cvs.setLineWidth(1);
			cvs.beginPath();
			for (var i = 0; i < max.length; i++) {
				var wendu = max[i];
				var x = Math.round(section7width / 2) + Math.round(section7width * i);
				var y = 50 - wendu;
				cvs.arc(x, y, 5, 0, 2 * Math.PI);
				cvs.setFillStyle('#FB7821');
				cvs.fill();
				cvs.moveTo(x, y);
				if (i < max.length - 1) {
					var nextX = x + section7width;
					var nextY = 50 - max[i + 1];
					cvs.lineTo(nextX, nextY);
				}
				cvs.stroke();
				cvs.beginPath();
			}
			cvs.setStrokeStyle('#1B9DFF');
			cvs.setLineWidth(1);
			for (var i = 0; i < min.length; i++) {
				var wendu = min[i];
				var x = Math.round(section7width / 2) + Math.round(section7width * i);
				var y = 50 - wendu;
				cvs.arc(x, y, 5, 0, 2 * Math.PI);
				cvs.setFillStyle('#1B9DFF');
				cvs.fill();
				cvs.moveTo(x, y);
				if (i < min.length - 1) {
					var nextX = x + section7width;
					var nextY = 50 - min[i + 1];
					cvs.lineTo(nextX, nextY);
				}
				cvs.stroke();
				cvs.beginPath();
			}
			cvs.draw();

		},
		//处理柱状图
		initWeatherPiller() {
			var maxArry = this.weatherAll.data.map(item => {
				return item.tem_day;
			});
			var minArry = this.weatherAll.data.map(item => {
				return item.tem_night;
			});
			var pillarArray = [];
			var max = Math.max(...maxArry);
			var min = Math.min(...minArry);
			var diff = max - min;
			for (var i = 0; i < maxArry.length; i++) {
				var height = Math.round(((maxArry[i] - minArry[i]) / diff) * 80);
				pillarArray.push({
					top: Math.round((80 / diff) * (max - maxArry[i])) + 10,
					height: height
				});
			}
			this.pillarArray = pillarArray;
		},
		bindPickerChange(e) {
			var index = e.target.value;
			if (index == 1) {
				this.initWeatherPiller();
			} else {
				this.initWeatherPointLine();
			}
			this.weatherTypeIndex = index;
		},
	},
};
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		overflow: hidden;
		.fixed {
			position: fixed;
			z-index: 99;
		}
	}
	.wea-top {
		height: 25vh;
		background-color: #333333;
		.space {
			.crater1,
			.crater2,
			.crater3,
			.crater4 {
				position: absolute;
				border-radius: 50%;
				background: rgba(0, 0, 0, .3);
				box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
			}
			
			.crater1 {
				width: 20px;
				height: 20px;
				left: 25%;
				top: 20%;
			}
			
			.crater2 {
				width: 10px;
				height: 10px;
				left: 50%;
				top: 60%;
			}
			
			.crater3 {
				width: 15px;
				height: 15px;
				left: 30%;
				top: 65%;
			}
			
			.crater4 {
				width: 15px;
				height: 15px;
				left: 60%;
				top: 35%;
			}
			
			.star {
				display: block;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background: #FFF;
				top: 100px;
				left: 400px;
				position: relative;
				transform-origin: 100% 0;
				animation: star-ani 6s infinite ease-out;
				box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
				opacity: 0;
				z-index: 2;
			}
			
			.star:after {
				content: '';
				display: block;
				top: 0px;
				left: 4px;
				border: 0px solid #fff;
				border-width: 0px 90px 2px 90px;
				border-color: transparent transparent transparent rgba(255, 255, 255, .3);
				transform: rotate(-45deg) translate3d(1px, 3px, 0);
				box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
				transform-origin: 0% 100%;
				animation: shooting-ani 3s infinite ease-out;
			}
			
			.pink {
				top: 30px;
				left: 395px;
				background: #ff5a99;
				animation-delay: 5s;
				-webkit-animation-delay: 5s;
				-moz-animation-delay: 5s;
			}
			
			.pink:after {
				border-color: transparent transparent transparent #ff5a99;
				animation-delay: 5s;
				-webkit-animation-delay: 5s;
				-moz-animation-delay: 5s;
			}
			
			.blue {
				top: 35px;
				left: 432px;
				background: cyan;
				animation-delay: 7s;
				-webkit-animation-delay: 7s;
				-moz-animation-delay: 7s;
			}
			
			.blue:after {
				// border-color: transpareanimation-delay: 12s;
				-webkit-animation-delay: 7s;
				-moz-animation-delay: 7s;
				animation-delay: 7s;
			}
			
			.yellow {
				top: 50px;
				left: 600px;
				background: #ffcd5c;
				animation-delay: 5.8s;
			}
			
			.yellow:after {
				border-color: transparent transparent transparent #ffcd5c;
				animation-delay: 5.8s;
			}
			
			@keyframes star-ani {
				0% {
					opacity: 0;
					transform: scale(0) rotate(0) translate3d(0, 0, 0);
					-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
					-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
				}
			
				50% {
					opacity: 1;
					transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
					-webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
					-moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
				}
			
				100% {
					opacity: 0;
					transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
					-webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
					-moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
				}
			}
		}
	}
	.wea-now {
		height: 25vh;
		max-width: 40rem;
		padding: 2rem;
		margin: 0 auto;
		color: #333333;
		font-family: 'Roboto', sans-serif;
		background-color: #333333;
		.wea-now-right {
			float: right;
			color: white;
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			.wea-now-tem {
				font-size: 80rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}
			.wea-now-air {
				
			}
		}
		.icon {
			position: relative;
			display: inline-block;
			width: 12rem;
			height: 10rem;
		}
		
		.cloud {
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 30%;
			width: 3.6875rem;
			height: 3.6875rem;
			margin: -1.84375rem;
			background: currentColor;
			border-radius: 50%;
			box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem, 2.0625rem 0.9375rem 0 -0.9375rem, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;
		}
		
		.cloud:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -0.5rem;
			display: block;
			width: 4.5625rem;
			height: 1rem;
			background: currentColor;
			box-shadow: 0 0.375rem #fff;
		}
		
		.cloud:nth-child(2) {
			z-index: 0;
			background: #fff;
			box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem #fff, 2.0625rem 0.9375rem 0 -0.9375rem #fff, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;
			opacity: 0.3;
			-webkit-transform: scale(0.5) translate(6rem, -3rem);
			-ms-transform: scale(0.5) translate(6rem, -3rem);
			transform: scale(0.5) translate(6rem, -3rem);
			-webkit-animation: cloud 4s linear infinite;
			animation: cloud 4s linear infinite;
		}
		
		.cloud:nth-child(2):after {
			background: #fff;
		}
		
		.sun {
			position: absolute;
			top: 50%;
			left: 30%;
			width: 2.5rem;
			height: 2.5rem;
			margin: -1.25rem;
			// background: currentColor;
			background: #ffe345;
			border-radius: 50%;
			box-shadow: 0 0 0 0.375rem #ffe345;
			-webkit-animation: spin 12s infinite linear;
			animation: spin 12s infinite linear;
		}
		
		.rays {
			position: absolute;
			top: -2rem;
			left: 50%;
			display: block;
			width: 0.375rem;
			height: 1.125rem;
			margin-left: -0.1875rem;
			background: #fff;
			border-radius: 0.25rem;
			box-shadow: 0 5.375rem #fff;
		}
		
		.rays:before,
		.rays:after {
			content: '';
			position: absolute;
			top: 0rem;
			left: 0rem;
			display: block;
			width: 0.375rem;
			height: 1.125rem;
			-webkit-transform: rotate(60deg);
			-ms-transform: rotate(60deg);
			transform: rotate(60deg);
			-webkit-transform-origin: 50% 3.25rem;
			-ms-transform-origin: 50% 3.25rem;
			transform-origin: 50% 3.25rem;
			background: #fff;
			border-radius: 0.25rem;
			box-shadow: 0 5.375rem #fff;
		}
		
		.rays:before {
			-webkit-transform: rotate(120deg);
			-ms-transform: rotate(120deg);
			transform: rotate(120deg);
		}
		
		.cloud+.sun {
			margin: -2rem 1rem;
		}
		
		.rain,
		.lightning,
		.snow {
			position: absolute;
			z-index: 2;
			top: 50%;
			left: 30%;
			width: 3.75rem;
			height: 3.75rem;
			margin: 0.375rem 0 0 -2rem;
			background: currentColor;
		}
		
		.rain:after {
			content: '';
			position: absolute;
			z-index: 2;
			top: 50%;
			left: 40%;
			width: 1.125rem;
			height: 1.125rem;
			margin: -1rem 0 0 -0.25rem;
			background: #0cf;
			border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
			box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
			-webkit-transform: rotate(-28deg);
			-ms-transform: rotate(-28deg);
			transform: rotate(-28deg);
			-webkit-animation: rain 3s linear infinite;
			animation: rain 3s linear infinite;
		}
		
		.bolt {
			position: absolute;
			top: 50%;
			left: 40%;
			width: 1rem;
			height: 0.5rem;
			margin: -0.875rem 0 0 -0.5rem;
			color: #fff;
			background: #fff;
			opacity: 0.3;
			-webkit-animation: lightning 2s linear infinite;
			animation: lightning 2s linear infinite;
		}
		
		.bolt:nth-child(2) {
			width: 0.5rem;
			height: 0.25rem;
			margin: -1.875rem 0 0 -1.5rem;
			-webkit-transform: translate(2.5rem, 2.25rem);
			-ms-transform: translate(2.5rem, 2.25rem);
			transform: translate(2.5rem, 2.25rem);
			opacity: 0.2;
			-webkit-animation: lightning 1.5s linear infinite;
			animation: lightning 1.5s linear infinite;
		}
		
		.bolt:before,
		.bolt:after {
			content: '';
			position: absolute;
			z-index: 2;
			top: 50%;
			left: 40%;
			margin: -1.75rem 0 0 -1.25rem;
			border-top: 1.25rem solid transparent;
			border-right: 0.75rem solid;
			border-bottom: 0.75rem solid;
			border-left: 0.5rem solid transparent;
			-webkit-transform: skewX(-10deg);
			-ms-transform: skewX(-10deg);
			transform: skewX(-10deg);
		}
		
		.bolt:after {
			margin: -0.25rem 0 0 -0.0125rem;
			border-top: 0.75rem solid;
			border-right: 0.5rem solid transparent;
			border-bottom: 1.25rem solid transparent;
			border-left: 0.75rem solid;
			-webkit-transform: skewX(-10deg);
			-ms-transform: skewX(-10deg);
			transform: skewX(-10deg);
		}
		
		.bolt:nth-child(2):before {
			margin: -0.875rem 0 0 -0.75rem;
			border-top: 0.625rem solid transparent;
			border-right: 0.375rem solid;
			border-bottom: 0.375rem solid;
			border-left: 0.25rem solid transparent;
		}
		
		.bolt:nth-child(2):after {
			margin: -0.125rem 0 0 0;
			border-top: 0.375rem solid;
			border-right: 0.25rem solid transparent;
			border-bottom: 0.625rem solid transparent;
			border-left: 0.375rem solid;
		}
		
		.flake:before,
		.flake:after {
			position: absolute;
			top: 50%;
			left: 40%;
			margin: -1.25rem 0 0 -1.25rem;
			content: '\2744';
			color: #fff;
			list-height: 1em;
			opacity: 0.2;
			-webkit-animation: spin 8s linear infinite reverse;
			animation: spin 8s linear infinite reverse;
		}
		
		.flake:after {
			margin: -0.125rem 0 0 -1.375rem;
			font-size: 1.5rem;
			opacity: 0.4;
			-webkit-animation: spin 14s linear infinite;
			animation: spin 14s linear infinite;
		}
		
		.flake:nth-child(2):before {
			margin: -0.875rem 0 0 0.25rem;
			font-size: 1.25rem;
			opacity: 0.2;
			-webkit-animation: spin 10s linear infinite;
			animation: spin 10s linear infinite;
		}
		
		.flake:nth-child(2):after {
			margin: 0.5rem 0 0 0.125rem;
			font-size: 2rem;
			opacity: 0.4;
			-webkit-animation: spin 16s linear infinite reverse;
			animation: spin 16s linear infinite reverse;
			/* Animations */
		}
		
		@-webkit-keyframes spin {
			100% {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}
		
		@keyframes spin {
			100% {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}
		
		@-webkit-keyframes cloud {
			0% {
				opacity: 0;
			}
		
			50% {
				opacity: 0.3;
			}
		
			100% {
				opacity: 0;
				-webkit-transform: scale(0.5) translate(-6rem, -3rem);
				transform: scale(0.5) translate(-6rem, -3rem);
			}
		}
		
		@keyframes cloud {
			0% {
				opacity: 0;
			}
		
			50% {
				opacity: 0.3;
			}
		
			100% {
				opacity: 0;
				-webkit-transform: scale(0.5) translate(-6rem, -3rem);
				transform: scale(0.5) translate(-6rem, -3rem);
			}
		}
		
		@-webkit-keyframes rain {
			0% {
				background: #0cf;
				box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
			}
		
			25% {
				box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
			}
		
			50% {
				background: rgba(255, 255, 255, 0.3);
				box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
			}
		
			100% {
				box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
			}
		}
		
		@keyframes rain {
			0% {
				background: #0cf;
				box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
			}
		
			25% {
				box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
			}
		
			50% {
				background: rgba(255, 255, 255, 0.3);
				box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
			}
		
			100% {
				box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
			}
		}
		
		@-webkit-keyframes lightning {
			45% {
				color: #fff;
				background: #fff;
				opacity: 0.2;
			}
		
			50% {
				color: #0cf;
				background: #0cf;
				opacity: 1;
			}
		
			55% {
				color: #fff;
				background: #fff;
				opacity: 0.2;
			}
		}
		
		@keyframes lightning {
			45% {
				color: #fff;
				background: #fff;
				opacity: 0.2;
			}
		
			50% {
				color: #0cf;
				background: #0cf;
				opacity: 1;
			}
		
			55% {
				color: #fff;
				background: #fff;
				opacity: 0.2;
			}
		}
	}
	.wea-seven {
		min-height: 50vh;
		scroll-view {
			width: 120wh;
			.more-day-report {
				width: 136%;
				padding: 10rpx 2%;
			
				.top-module {
					width: 100%;
					padding: 16rpx 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #f3f3f3;
			
					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #262628;
						padding-left: 35rpx;
					}
			
					.change {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						border: 1px solid #e4e4e4;
						padding: 6rpx 20rpx;
						border-radius: 40rpx;
						font-size: 28rpx;
			
						.label {
							color: #373739;
						}
			
						image {
							width: 26rpx;
							height: 26rpx;
							margin-left: 20rpx;
						}
			
						.down-arrow {
							width: 10px;
							height: 10px;
							margin-left: 10rpx;
						}
			
						.down-arrow:after {
							content: '';
							display: block;
							width: 5px;
							height: 5px;
							border-right: 2px solid #373739;
							border-top: 2px solid #373739;
							-webkit-transform: rotate(135deg);
							/*箭头方向可以自由切换角度*/
							transform: rotate(135deg);
						}
					}
				}
			
				.body-module {
					width: 100%;
					padding: 20rpx 0;
					display: flex;
					flex-direction: row;
					position: relative;
			
					.body-weather-line {
						position: absolute;
						width: 100%;
						height: 100px;
						left: 0;
						top: 270rpx;
						z-index: 1;
					}
			
					.zhuzhuangtu {
						position: absolute;
						width: 100%;
						height: 80px;
						left: 0;
						top: 270rpx;
						z-index: 1;
						display: flex;
						flex-direction: row;
			
						.zhuzhuangtu-item {
							width: 98rpx;
							display: flex;
							justify-content: center;
							align-items: center;
			
							.item-bg {
								height: 80px;
								width: 20rpx;
								background-color: #f9f9f9;
								position: relative;
			
								.item {
									position: absolute;
									width: 100%;
									background: linear-gradient(to bottom, #a818cb, #4aa2f9);
									border-radius: 20rpx;
								}
							}
						}
					}
			
					.body-item {
						width: 148rpx;
						border-right: 1px solid #f3f3f3;
						display: flex;
						flex-direction: column;
			
						.day-font {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 28rpx;
							font-weight: bold;
							text-align: center;
						}
			
						.day-time {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 24rpx;
							text-align: center;
						}
			
						.weather-font {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 22rpx;
							text-align: center;
						}
			
						.weather-image {
							height: 50rpx;
							display: flex;
							justify-content: center;
			
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
			
						.max-weather {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 28rpx;
							text-align: center;
						}
			
						.min-weather {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 28rpx;
							text-align: center;
						}
			
						.weather-line {
							height: 150px;
						}
			
						.feng-font {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 28rpx;
							text-align: center;
						}
			
						.feng-type {
							height: 50rpx;
							line-height: 50rpx;
							color: #3a3a3b;
							font-size: 28rpx;
							text-align: center;
						}
			
						.day-state {
							height: 50rpx;
							color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
			
							label {
								width: 80%;
								height: 40rpx;
								line-height: 40rpx;
								font-size: 28rpx;
								text-align: center;
								background-color: #0fa28e;
								border-radius: 40rpx;
							}
						}
			
						&:last-child {
							border-right: none;
						}
					}
				}
			}
		}
	}
	.wea-bottom {
		min-height: 30vh;
		.comm-content {
			margin: 100rpx auto;
			display: flex;
			justify-content: space-around;
			view {
				display: flex;
				flex-direction: column;
				align-items: center;
				text:nth-child(1) {
					font-weight: bold;
					font-size: 33rpx;
					margin: 10rpx 0;
				}
				text:nth-child(2) {
					color: gray;
				}
			}
			view:nth-child(1) {
				text:nth-child(1) {
					color: #34699e;
				}
			}
			view:nth-child(2) {
				text:nth-child(1) {
					color: #258b62;
				}
			}
			view:nth-child(3) {
				text:nth-child(1) {
					color: #9e3f3f;
				}
			}
		}
		.content-box {
			position: relative;
			top: 100rpx;
			display: flex;
			justify-content: center;
		
			.img {
				width: 350rpx;
				height: 350rpx;
			}
		
			.img2 {
				position: absolute;
				top: 70rpx;
				left: 285rpx;
				width: 170rpx;
				height: 170rpx;
			}
		}
		
		.one {
			-webkit-transform: rotate(360deg);
			animation: rotation 2s linear infinite;
		}
		
		.two {
			-webkit-transform: rotate(360deg);
			animation: rotation 1.5s linear infinite;
		}
		
		.three {
			-webkit-transform: rotate(360deg);
			animation: rotation 1s linear infinite;
		}
		
		.four {
			-webkit-transform: rotate(360deg);
			animation: rotation 0.5s linear infinite;
		}
		
		.five {
			-webkit-transform: rotate(360deg);
			animation: rotation 0.2s linear infinite;
		}
		
		@-webkit-keyframes rotation {
			from {
				-webkit-transform: rotate(0deg);
			}
		
			to {
				-webkit-transform: rotate(360deg);
			}
		}
		
		.suspended {
			animation-play-state: paused;
		}
	}
</style>
